<template>
  <div class="app-container">
    <div class="margin-bottom-xl">
      <!-- 检索 start -->
      <el-filter
        size="medium"
        :data="filterInfo.data"
        :field-list="filterInfo.fieldList"
        :list-type-info="listTypeInfo"
        :show-selection="false"
        @handleFilter="handleFilter"
        @handleReset="handleReset"
        @handleEvent="handleEvent"
      />
      <!-- 检索 end -->
    </div>
    <el-row type="flex" :gutter="10">
      <el-col :xs="4" :sm="6" :md="4" :lg="6" :xl="6" justify="start">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>公司与商户</span>
          </div>
          <div>
            <el-tree
              :data="storeList"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="16" :sm="12" :md="2" :lg="18" :xl="18">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>管理员</span>
          </div>
          <div>
            <!-- 公共操作 star -->
            <fire-oper-menu
              :show-excel-export="true"
              :show-excel-import="true"
              @ExcelExport="handleDownload"
              @handleCreate="handleCreate"
              @handleDeleteAll="handleDeleteAll"
            />
            <!-- 公共操作 end -->

            <!-- 数据列表 start -->
            <fire-table
              ref="table"
              :list="list"
              :total="total"
              :showIndex="false"
              :list-loading="listLoading"
              :list-query="filterInfo.data"
              :columns="tableColumns"
              :handle="tableHandle"
              @getList="getList"
              @handleSelectionChange="handleSelectionChange"
            >
              <template slot-scope="{ row, index }" slot="action">
                <el-button
                  type="primary"
                  size="mini"
                  @click="selectRow(row, index)"
                  >权限<i class="el-icon el-icon--right"></i
                ></el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="setUserRow(row, index)"
                  >默认配置<i class="el-icon el-icon--right"></i
                ></el-button>
                <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                  @confirm="deleteRow(row, index)"
                >
                  <el-button
                    class="margin-left-sm"
                    slot="reference"
                    type="danger"
                    size="mini"
                    >删除</el-button
                  >
                </el-popconfirm>

                <!-- 未审核 start -->
                <el-popconfirm
                  v-if="row.status === 0"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定审核吗？"
                  @confirm="upStatusRow('APPROVE', row, index)"
                >
                  <el-button
                    class="margin-left-sm"
                    slot="reference"
                    type="warning"
                    size="mini"
                    >审核</el-button
                  >
                </el-popconfirm>
                <!-- 未审核 end -->

                <!-- 正常 start -->
                <el-popconfirm
                  v-if="row.status === 1"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定拉黑吗？"
                  @confirm="upStatusRow('BLOCK', row, index)"
                >
                  <el-button
                    class="margin-left-sm"
                    slot="reference"
                    type="warning"
                    size="mini"
                    >拉黑</el-button
                  >
                </el-popconfirm>

                <el-popconfirm
                  v-if="row.status === 1"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定到期吗？"
                  @confirm="upStatusRow('EXPIRE', row, index)"
                >
                  <el-button
                    class="margin-left-sm"
                    slot="reference"
                    type="warning"
                    size="mini"
                    >权限到期</el-button
                  >
                </el-popconfirm>
                <!-- 正常 end -->

                <!-- 非正常 start  -->
                <el-popconfirm
                  v-if="row.status !== 1 && row.status !== 0"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定恢复吗？"
                  @confirm="upStatusRow('APPROVE', row, index)"
                >
                  <el-button
                    class="margin-left-sm"
                    slot="reference"
                    type="warning"
                    size="mini"
                    >恢复</el-button
                  >
                </el-popconfirm>
                <!-- 非正常 end  -->
              </template>
            </fire-table>
            <!-- 数据列表 end -->
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 授权表单 start -->
    <el-dialog
      :close-on-click-modal="false"
      width="80%"
      :title="permissionTitle"
      :visible.sync="dialogAuthVisible"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商户" name="store">
          <div class="auth-form" style="text-align: center">
            <el-input
              v-model="filterTextStore"
              style="margin-bottom: 15px"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="storeTree"
              :data="DataStore"
              show-checkbox
              :default-checked-keys="ValueStore"
              node-key="store_id"
              highlight-current
              :filter-node-method="filterNode"
              :props="defaultProps"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户组" name="role">
          <div class="auth-form" style="text-align: center">
            <el-input
              v-model="filterTextRole"
              style="margin-bottom: 15px"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="roleTree"
              :data="DataRole"
              show-checkbox
              :default-checked-keys="ValueRole"
              node-key="item_id"
              highlight-current
              :filter-node-method="filterNameNode"
              :props="nameProps"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="应用" name="addons">
          <div class="auth-form" style="text-align: center">
            <el-input
              v-model="filterTextAddons"
              style="margin-bottom: 15px"
              placeholder="输入关键字进行过滤"
            />

            <el-tree
              ref="addonsTree"
              :data="DataAddons"
              show-checkbox
              :default-checked-keys="ValueAddons"
              node-key="mid"
              highlight-current
              :filter-node-method="filterTitleNode"
              :props="titleProps"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="权限" name="permission">
          <div class="auth-form" style="text-align: center">
            <el-input
              v-model="filterTextPermission"
              style="margin-bottom: 15px"
              placeholder="输入关键字进行过滤"
            />

            <el-tree
              ref="permissionTree"
              :data="DataPermission"
              show-checkbox
              :default-checked-keys="ValuePermission"
              node-key="item_id"
              highlight-current
              :filter-node-method="filterNameNode"
              :props="nameProps"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="规则" name="rule">规则</el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuthVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAuth">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 授权表单 end -->

    <!-- 数据表单 start -->
    <ele-form-dialog
      v-model="formData"
      :formDesc="formDesc"
      :request-fn="handleSubmit"
      :visible.sync="dialogFormVisible"
      @request-success="handleRequestSuccess"
      title="用户信息"
    ></ele-form-dialog>
    <!-- 数据表单 end -->

    <!-- 默认配置 start -->
    <el-dialog title="用户默认配置" :visible.sync="userSet" v-if="userSet">
      <ele-form
        v-bind="userSetformConfig"
        v-model="userSetForm"
        :request-fn="subUserDefault"
        @request-success="userSethandleRequestSuccess"
      />
    </el-dialog>
    <!-- 默认配置 end -->
  </div>
</template>
<script>
import {
  getAddons,
  getUserList,
  fetchView,
  userDelete,
  userActivate,
  userUpstatus,
  createUser,
  updateUser,
  getUserSet,
  setDefault,
  getDefault
} from "diandi-admin/lib/api/admin/user";
import { fetchList } from "diandi-admin/lib/api/addons/addons.js";
import {
  AssignmentFetchView,
  AssignmentFetchAssign,
  AssignmentFetchChange,
  AssignmentFetchRevoke,
} from "diandi-admin/lib/api/admin/assignment.js";
import { parseTime } from "@/utils";
import { fetchList as fetchGroup } from "diandi-admin/lib/api/admin/group.js";
import { getStoreGroup } from "diandi-admin/lib/api/addons/bloc.js";
import {
  getRules,
  fetchLevels,
  fetchAddons,
} from "diandi-admin/lib/api/admin/permission.js";
export default {
  data() {
    return {
      userSet: false,
      UserBloc: [],
      addons: [],
      userSetForm: {
        user_id: 0,
        addons_user_id: '',
        store_user_id: '',
      },
      // 默认配置数据
      userSetformConfig: {
        formDesc: {
          addons_user_id: {
            type: "select",
            label: "默认业务",
            isOptions: true,
            options: async () =>  {
                 let that = this
                 const { data } = await getUserSet({
                    user_id: that.userSetForm.user_id,
                  });
                  return data.addons
            },
          },
          store_user_id: {
            type: "select",
            label: "默认商户",
            isOptions: true,
            options: async () =>  {
                let that = this
                const { data } = await getUserSet({
                  user_id: that.userSetForm.user_id,
                });
                return data.UserBloc
            },
          },
        },
      },
      // 默认配置数据
      user_id: 0,
      //  授权表单
      dialogLoadingInstance: null,
      filterTextAddons: "",
      filterTextStore: "",
      filterTextRole: "",
      filterTextRoute: "",
      filterTextPermission: "",
      dialogAuthVisible: false,
      permissionTitle: "用户授权",
      // 权限项管理
      permissionId: 0,
      permission_types: {
        route: 0,
        permission: 1,
        role: 2,
      },
      activeName: "store", // 0:route,1:permission,2:role
      dialogAuthVisible: false,
      // 已授权start
      ValueRoute: [],
      ValuePermission: [],
      ValueRole: [],
      ValueStore: [],
      ValueRule: [],
      ValueAddons: [],
      // 已授权end
      // 所有数据start
      DataRoute: [],
      DataPermission: [],
      DataRole: [],
      DataStore: [],
      DataRule: [],
      DataAddons: [],
      // 所有数据end
      // 授权表单end
      listtree: [],
      // 商户列表
      storeList: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      nameProps: {
        children: "children",
        label: "name",
      },
      titleProps: {
        children: "children",
        label: "title",
      },
      filterInfo: {
        data: {
          page: 1,
          pageSize: 20,
        },
        fieldList: [
          {
            label: "用户名称",
            type: "input",
            value: "User[name]",
          },
          {
            label: "用户组",
            type: "select",
            value: "User[group_id]",
            list: "groupList",
          },
          {
            label: "应用",
            type: "select",
            value: "AuthItemSearch[module_name]",
            list: "addonsList",
          },
        ],
      },
      // 表格数据 start
      tableColumns: [
        {
          label: "ID",
          prop: "id",
          width: 50,
        },
        {
          label: "用户名称",
          prop: "username",
          width: 180,
        },
        {
          label: "状态",
          prop: "status",
        },
        {
          label: "公司",
          prop: "bloc_id",
        },
        {
          label: "商户",
          prop: "store_id",
        },
        {
          label: "用户组",
          prop: "store_id",
        },
        {
          label: "操作",
          type: "slot",
          slot: "action",
          align: "center",
          width: 450,
        },
      ],
      // 表单数据
      // 控制是否显示
      dialogFormVisible: false,
      formData: {},
      formDesc: {
        avatar: {
          type: "image-uploader",
          label: "头像",
        },
        username: {
          type: "input",
          label: "用户名",
        },
        email: {
          type: "input",
          label: "邮箱",
        },
        mobile: {
          type: "input",
          label: "手机号",
        },
        company: {
          type: "input",
          label: "公司名称",
        },
        password: {
          type: "input",
          label: "密码",
        },
        status: {
          type: "radio",
          label: "单选",
          isOptions: true,
          default: 0,
          options: [
            {
              text: "待审核",
              value: 0,
            },
            {
              text: "审核通过",
              value: 10,
            },
          ],
        },
      },
      listTypeInfo: {
        groupList: this.initGroup(),
        addonsList: this.initListTypeInfo(),
      },
      total: 0,
      list: [],
      tableHandle: [],
      listLoading: true,
    };
  },
  watch: {
    filterTextAddons(val) {
      this.$refs.addonsTree.filter(val);
    },
    filterTextStore(val) {
      this.$refs.storeTree.filter(val);
    },
    filterTextRole(val) {
      this.$refs.roleTree.filter(val);
    },
    filterTextRoute(val) {
      this.$refs.routeTree.filter(val);
    },
    filterTextPermission(val) {
      this.$refs.permissionTree.filter(val);
    },
  },
  created() {
    let that = this;
    that.getList();
    that.getStoreLists();
    that.getAddonsList();
  },
  methods: {
    handleSubmit(data) {
      console.log(data);
      const that = this;
      if (that.dialogStatus === "create") {
        createUser(data).then((response) => {
          console.log(response);
          that.getList();
          that.dialogFormVisible = false;
        });
      } else if (that.dialogStatus === "update") {
        updateUser(data).then((res) => {
          console.log("更新", res);
          that.getList();
          that.dialogFormVisible = false;
        });
      }

      return Promise.resolve();
    },
    filterShow(val) {
      if (!this.filterText) return true;
      return val.indexOf(this.filterText) !== -1;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    filterNameNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    filterTitleNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    // 应用列表
    initListTypeInfo() {
      const arr = [];
      arr.push({ id: " ", name: "选择模块" });
      fetchAddons().then((res) => {
        const keys = Object.keys(res.data);
        const values = Object.values(res.data);
        values.forEach((item, index) => {
          arr.push({ id: keys[index], name: item });
        });
      });

      return arr;
    },
    // 用户组列表
    initGroup() {
      let that = this;
      that.listLoading = true;
      const arr = [];
      arr.push({ id: " ", name: "选择用户组" });
      fetchGroup({}).then((response) => {
        let list = response.data.dataProvider.allModels;
        console.log("列表数据层级测试", that.list);
        that.listLoading = false;
        list.forEach((item, index) => {
          arr.push({ id: item.id, name: item.name });
        });
      });
      return arr;
    },
    // 切换授权项
    handleClick(tab, event) {
      const that = this;
      that.filterText = "";
      that.activeName = tab.name;
    },
    deleteRow(row, index) {
      const that = this;
      userDelete(row.id).then((res) => {
        that.getList();
        that.dialogFormVisible = false;
      });
    },
    activateRow(row, index) {
      const that = this;
      console.log(row);
      userActivate(row.id).then((res) => {
        that.getList();
      });
    },
    upStatusRow(type, row, index) {
      const that = this;
      userUpstatus({
        user_id: row.id,
        type: type,
      }).then((res) => {
        that.getList();
      });
    },
    async getUserSetData(type) {
      const that = this;

      const { res } = await getUserSet({
        user_id: that.userSetForm.user_id,
      });
      
      console.log(that.addons);
      let addons_user_id = 0,
        store_user_id = 0;

      res.data.UserBloc.forEach((item) => {
        if (item.is_default === 1) {
          addons_user_id = item.value;
        }
      });

      res.data.addons.forEach((item) => {
        if (item.is_default === 1) {
          store_user_id = item.value;
        }
      });
      console.log("默认值", addons_user_id, store_user_id);
      that.$set(that.userSetForm, "addons_user_id", addons_user_id);
      that.$set(that.userSetForm, "store_user_id", store_user_id);

      if(type ===1){
        return res.data.UserBloc
      }else{
        return res.data.addons
      }
    },
    setUserRow(row, index) {
      let that = this;
      that.$set(that.userSetForm, "user_id", row.id);

      getDefault({
        user_id: that.userSetForm.user_id,
      }).then(res=>{
            that.$set(that.userSetForm, "addons_user_id", res.data.addons_user_id);
            that.$set(that.userSetForm, "store_user_id", res.data.store_user_id);
            that.userSet = true;
      })

    },
    userSethandleRequest() {},
    userSethandleRequestSuccess() {},
    subUserDefault() {
      let that = this;
      setDefault(that.userSetForm).then((res) => {
        console.log(res);
        this.$message.success("设置成功");
        that.userSet = false;
      });
    },
    selectRow(row, index) {
      let that = this;
      that.dialogAuthVisible = true;
      this.dialogLoadingInstance = this.$loading({
        visible: true,
        text: "拼命加载中",
        spinner: "el-icon-loading",
        target: document.querySelector(".el-dialog"),
      });

      that.user_id = row.id;
      AssignmentFetchView(row.id).then((res) => {
        if (res.code === 200) {
          console.log("个人权限信息", res);
          this.dialogLoadingInstance.close();
          that.ValuePermission = res.data.assigned.permission;
          that.ValueRole = res.data.assigned.role;
          that.ValueStore = res.data.assigned.store;
          that.ValueRule = res.data.assigned.rule;
          that.ValueAddons = res.data.assigned.addons;

          that.DataPermission = res.data.all.permission;
          that.DataRole = res.data.all.role;
          that.DataStore = res.data.all.store;
          that.DataRule = res.data.all.rule;
          that.DataAddons = res.data.all.addons;
        }
      });
    },
    getAddonsList() {
      const data = {
        id: this.user_id,
      };
      getAddons(data).then((res) => {
        if (res.code === 200) {
          this.listtree = res.data.list;
        }
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    submitAuth() {
      const that = this;
      console.log(
        "提交授权activeName数据",
        that.activeName,
        that.$refs.storeTree.getCheckedKeys()
      );
      let arr = [];
      const list = [];

      switch (that.activeName) {
        case "permission":
          arr = that.$refs.permissionTree.getCheckedKeys() || [];
          break;
        case "role":
          arr = that.$refs.roleTree.getCheckedKeys() || [];
          break;
        case "addons":
          arr = that.$refs.addonsTree.getCheckedKeys() || [];
          break;
        case "store":
          arr = that.$refs.storeTree.getCheckedKeys() || [];
          break;
        default:
          break;
      }
      console.log("提交授权arr数据", arr);
      const ob = {};
      that.$set(ob, that.activeName, arr);
      console.log("提交授权ob数据", ob);
      AssignmentFetchChange({
        id: that.user_id,
        items: ob,
        type: that.activeName,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: "success",
          });

          that.authItem({
            id: that.permissionId,
            name: that.permissionTitle,
          });
        }
      });
    },
    getStoreLists() {
      getStoreGroup().then((res) => {
        if (res.code === 200) {
          this.storeList = res.data.list;
        }
      });
    },
    handleChange() {},
    // 触发请求
    async resetForm() {
      console.log(this.$refs.form.resetForm());
      await this.$refs.form.resetForm();
    },
    handleSelectionChange(val) {
      console.log("传递来的", val);
    },
    handleRequestSuccess() {
      this.$message.success("发送成功");
    },
    getList() {
      let that = this;
      that.listLoading = true;
      getUserList(that.filterInfo.data).then((response) => {
        console.log("response", response);
        that.total = response.data.dataProvider.total;
        const list = response.data.dataProvider.allModels;
        that.list = [...list];
        console.log("列表数据层级测试", that.list);
        that.listLoading = false;
      });
    },
    /** 搜索 */
    handleFilter(row) {
      let that = this;
      console.log(row);
      that.$set(that.filterInfo, "data", row);
      console.log("检索前", that.filterInfo.data);
      that.getList();
    },
    /** 重置 */
    handleReset(row) {
      console.log(row);
    },
    /** 焦点失去事件 */
    handleEvent(row) {
      console.log(row);
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success",
      });
      row.status = status;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.handleFilter();
    },
    handleCreate() {
      const that = this;
      // this.resetForm();
      console.log(this.list);
      that.dialogStatus = "create";
      that.dialogFormVisible = true;
    },
    handleDeleteAll() {
      console.log("删除");
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    },
    updateData() {},
    handleDelete(row, index) {
      this.$notify({
        title: "Success",
        message: "Delete Successfully",
        type: "success",
        duration: 2000,
      });
      this.list.splice(index, 1);
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = ["title", "create_time"];
        const filterVal = [{ title: "12", create_time: "23435345353" }];
        const data = this.formatJson(filterVal);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list",
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal) {
      return this.list.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    getSortClass: function (key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? "ascending" : "descending";
    },
  },
};
</script>
<style type="text/css">
.main-content {
  display: flow-root;
}
.auth-form {
  height: 300px;
  overflow-y: auto;
}
</style>